<template>
  <div class="app-container groupbuying">
    <div class="cardBox">
      <div style="display: flex" :gutter="10">
        <div style="flex: 1">
          <el-button
            @click="gobackWay"
            type="text"
            icon="el-icon-arrow-left"
            style="color: rgba(0, 0, 0, 0.85)"
            >返回</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <span>{{ id ? "修改本地团商户" : "添加本地团商户" }}</span>
        </div>
      </div>
    </div>
    <div
      class="cardBox"
      v-loading="loading"
      style="height: calc(85vh - 80px); margin-top: 20px; position: relative"
    >
      <el-steps
        style="width: 1100px; margin: 0 auto"
        :active="stepsActive"
        simple
        finish-status="success"
      >
        <el-step title="商户信息" icon="el-icon-s-shop"></el-step>
        <el-step title="主体信息" icon="el-icon-s-check"></el-step>
      </el-steps>

      <el-scrollbar
        style="
          width: 1100px;
          height: 60vh;
          margin: 20px auto;
          overflow-x: hidden !important;
        "
      >
        <el-row v-if="stepsActive == 0">
          <el-form
            :model="basicForm"
            :rules="basicRules"
            ref="basicForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="22">
              <el-form-item label="店铺logo" prop="logo">
                <logo-upload
                  :single-file="logoFile"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="logoCallback"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="店铺类型" prop="type">
                <el-radio-group v-model="basicForm.type">
                  <el-radio :label="2">企业</el-radio>
                  <el-radio :label="1">个人</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="店铺分类" prop="loc_pur_mer_cate_id">
                <el-cascader
                  v-model="basicForm.loc_pur_mer_cate_id"
                  :options="categoryList"
                  :props="{
                    checkStrictly: true,
                    expandTrigger: 'hover',
                    value: 'id',
                    label: 'name',
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="关联用户" prop="user_id">
                <el-select
                  v-model="basicForm.user_id"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethodUser"
                  :loading="userLoading"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.nickname + '(' + item.mobile + ')'"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="店铺名称" prop="name">
                <el-input
                  v-model.trim="basicForm.name"
                  maxlength="50"
                  clearable
                  show-word-limit
                  placeholder="请输入店铺名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="省份" prop="province_id">
                <el-select
                  clearable
                  @change="province_idWay"
                  v-model="basicForm.province_id"
                  placeholder="请选择省份"
                >
                  <el-option
                    v-for="(item, index) in provinceList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="城市" prop="city_id">
                <el-select
                  :disabled="cityList.length == 0"
                  clearable
                  @change="city_idWay"
                  v-model="basicForm.city_id"
                  placeholder="请选择城市(请先选择省份)"
                >
                  <el-option
                    v-for="(item, index) in cityList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="区/县" prop="county_id">
                <el-select
                  :disabled="countyList.length == 0"
                  clearable
                  v-model="basicForm.county_id"
                  placeholder="请选择区/县(请先选择城市)"
                >
                  <el-option
                    v-for="(item, index) in countyList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  v-model.trim="basicForm.address"
                  maxlength="50"
                  show-word-limit
                  clearable
                  placeholder="请输入详细地址"
                >
                  <el-button
                    @click="addressWay"
                    slot="append"
                    icon="el-icon-location"
                  ></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="负责人" prop="responsible_person">
                <el-input
                  v-model.trim="basicForm.responsible_person"
                  maxlength="10"
                  show-word-limit
                  clearable
                  placeholder="请输入负责人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="负责人手机号"
                prop="responsible_person_cellphone"
              >
                <el-input
                  clearable
                  maxlength="11"
                  show-word-limit
                  v-model.trim="basicForm.responsible_person_cellphone"
                  placeholder="请输入负责人手机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="客服电话" prop="customer_service_cellphone">
                <el-input
                  v-model.trim="basicForm.customer_service_cellphone"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入客服电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="店铺状态" prop="status">
                <el-radio-group v-model="basicForm.status">
                  <el-radio :label="2">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="营业时间" prop="business_time">
                <el-col
                  style="margin-bottom: 10px"
                  v-for="(item, index) in timeFrame"
                  :key="index"
                >
                  <el-time-picker
                    is-range
                    value-format="HH:mm:ss"
                    v-model="item.time"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  >
                  </el-time-picker>
                  <el-button
                    v-if="index == timeFrame.length - 1"
                    @click="addTradeTime"
                    style="margin: 0 5px"
                    size="mini"
                    icon="el-icon-plus"
                    circle
                    type="primary"
                  ></el-button>
                  <el-button
                    @click="delTradeTime(item)"
                    v-if="index !== 0"
                    style="margin: 0 5px"
                    size="mini"
                    icon="el-icon-minus"
                    circle
                    type="danger"
                  ></el-button>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="店铺备注" prop="remark">
                <el-input
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  v-model="basicForm.remark"
                  placeholder="请输入店铺备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row v-else>
          <el-col :span="24" class="splitTitle">
            <div class="split">法人信息</div>
          </el-col>
          <el-form
            :model="subjectForm"
            :rules="subjectRules"
            ref="subjectForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="7">
              <el-form-item label="法人姓名" prop="name">
                <el-input
                  v-model.trim="subjectForm.name"
                  maxlength="10"
                  clearable
                  show-word-limit
                  placeholder="请输入法人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="证件号码" prop="certificate_no">
                <el-input
                  v-model.trim="subjectForm.certificate_no"
                  maxlength="18"
                  show-word-limit
                  clearable
                  placeholder="请输入证件号码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="法人电话" prop="cellphone">
                <el-input
                  v-model.trim="subjectForm.cellphone"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入法人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item
                label="营业执照"
                prop="duplicate_of_business_license"
              >
                <logo-upload
                  :single-file="duplicate_of_business_licenseFile"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="duplicate_of_business_licenseCallback"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="身份证(国徽)" prop="id_card_front">
                <logo-upload
                  :single-file="id_card_frontfile"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="id_card_frontCallback"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="身份证(人像)" prop="id_card_reverse">
                <logo-upload
                  :single-file="id_card_reversefile"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="id_card_reverseCallback"
                />
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="24" class="splitTitle">
            <div class="split">收款信息</div>
          </el-col>
          <el-form
            :model="collectionForm"
            :rules="collectionRules"
            ref="collectionForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="22">
              <el-form-item label="收款账户类型" prop="type">
                <el-radio-group v-model="collectionForm.type" size="mini">
                  <el-radio :label="1">银行卡</el-radio>
                  <el-radio :label="2">支付宝</el-radio>
                  <el-radio :label="3">微信</el-radio>
                  <el-radio :label="4">公账</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="银行名称" prop="bank_name">
                <el-input
                  type="text"
                  maxlength="10"
                  show-word-limit
                  clearable
                  v-model="collectionForm.bank_name"
                  placeholder="请输入银行名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="开户账号" prop="bank_card_number">
                <el-input
                  type="text"
                  maxlength="19"
                  show-word-limit
                  clearable
                  v-model="collectionForm.bank_card_number"
                  placeholder="请输入开户账号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="开户行" prop="bank_branch">
                <el-input
                  type="text"
                  maxlength="15"
                  show-word-limit
                  clearable
                  v-model="collectionForm.bank_branch"
                  placeholder="请输入开户行"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="开户者名字" prop="bank_user_name">
                <el-input
                  type="text"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="collectionForm.bank_user_name"
                  placeholder="请输入开户者名字"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="预留手机号" prop="reserve_cellphone">
                <el-input
                  type="text"
                  maxlength="11"
                  clearable
                  show-word-limit
                  v-model="collectionForm.reserve_cellphone"
                  placeholder="请输入预留手机号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-row style="text-align: center">
        <el-button
          type="primary"
          v-if="stepsActive !== 0"
          @click="setActiveItem('上一步')"
          >上一步</el-button
        >
        <el-button type="primary" v-if="stepsActive !== 0" @click="submitSave()"
          >保存</el-button
        >
        <el-button
          type="primary"
          v-if="stepsActive == 0"
          @click="setActiveItem('下一步')"
          >下一步</el-button
        >
      </el-row>
    </div>

    <el-dialog
      title="提示"
      :close-on-click-modal="false"
      :visible.sync="addressDioding"
      width="900px"
    >
      <mapView ref="map"></mapView>
    </el-dialog>
  </div>
</template>

<script>
import LogoUpload from "@/components/FileUpload";
import { getUserList, getRegionList } from "@/api/user/index";
import {
  getCategoryList,
  addMerchant,
  editMerchant,
  getMerchantDetail,
} from "@/api/groupbuying/index";
import mapView from "@/components/Amap";
export default {
  components: {
    LogoUpload,
    mapView,
  },
  data() {
    return {
      addressTip: "请选择设备位置",
      map: false,
      mapInfo: {},
      Nowlnglat: [], //经纬度传值
      lng: 113.03,
      lat: 28.13,

      id: "",
      userLoading: false,
      userList: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      categoryList: [],
      stepsActive: 0,
      autoplay: false,
      loading: true,
      basicForm: {
        user_id: "", // 用户ID
        name: "", // 商户名称
        logo_image: "", // 商户logo
        loc_pur_mer_cate_id: "", // 类目ID
        responsible_person: "", // 负责人
        responsible_person_cellphone: "", // 负责人电话
        customer_service_cellphone: "", // 店铺客服电话
        province_id: "", // 省份ID
        city_id: "", // 市ID
        county_id: "", // 区域ID
        address: "", // 详细地址
        business_time: "", // 营业时间
        status: 1, // 状态(1.开启,2.禁用)
        remark: "", // 备注
        type: 1, // 类型(1.个体,2.企业)
      }, // 基本信息表单数据
      logoFile: {},
      timeFrame: [
        {
          id: 0,
          time: ["09:00:00", "12:00:00"],
        },
      ],
      basicRules: {
        logo: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicForm.logo_image === "") {
                return callback(new Error("请上传店铺logo"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        user_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请关联用户"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              console.log();
              if (value === "") {
                return callback(new Error("请输入店铺名称"));
              } else {
                if (reg.test(value)) {
                  return callback(new Error("店铺名称中不能包含特殊字符"));
                }
              }
              callback();
            },
            trigger: "change",
          },
        ],
        province_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择省份"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        city_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择城市"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        county_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择区县"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请输入详细地址"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        responsible_person: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请填写负责人姓名"));
              }
              var reg = /[^a-zA-Z\u4e00-\u9fa5]/g;
              if (reg.test(value)) {
                return callback(new Error("姓名中不能带有特殊字符"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        responsible_person_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号格式不正确"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        customer_service_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号格式不正确"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择店铺状态"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择店铺类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        business_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.timeFrame !== 0) {
                this.timeFrame.some((item, index) => {
                  if (item.time.length == 0) {
                    callback(
                      new Error("请补全第" + (index + 1) + "个营业时间")
                    );
                    return true;
                  }
                });
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      subjectForm: {
        name: "", // 名称
        duplicate_of_business_license: "", //营业执照
        cellphone: "", // 电话
        certificate_no: "", // 证件号码
        id_card_front: "", // 身份证正面照
        id_card_reverse: "", // 身份证反面照
      }, // 主体信息表单
      duplicate_of_business_licenseFile: {}, // 营业执照图片
      id_card_frontfile: {}, // 身份证国徽面图片
      id_card_reversefile: {}, // 身份证人像面图片
      subjectRules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请输入法人姓名"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        certificate_no: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req =
                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
              if (!value) {
                callback(new Error("请输入法人证件号码"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的证件号码格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号格式不正确"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        id_card_front: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.subjectForm.id_card_front) {
                callback(new Error("请上传身份证照片(国徽面)"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        id_card_reverse: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.subjectForm.id_card_reverse) {
                callback(new Error("请上传身份证照片(人像面)"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        duplicate_of_business_license: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.subjectForm.duplicate_of_business_license) {
                callback(new Error("请上传营业执照"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      collectionForm: {
        type: 1, // 类型(1.银行卡,2.支付宝,3.微信,4.公账)
        bank_name: "", // 银行名称
        bank_card_number: "", // 开户账号
        bank_branch: "", // 支行名称
        bank_user_name: "", // 开户名称
        reserve_cellphone: "", // 开户手机号
      }, // 收款信息
      collectionRules: {
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择收款账户类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入银行名称"));
              }
              if (req.test(value)) {
                callback(new Error("请输入中文银行名称"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_card_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^[1-9]\d{9,29}$/;
              if (value == "") {
                callback(new Error("请输入对应的银行账户"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("银行账户格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        bank_branch: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入开户行"));
              }
              if (req.test(value)) {
                callback(new Error("请输入中文开户行名称"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_user_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g;
              if (!value) {
                callback(new Error("请输入开户者名字"));
              } else {
                if (req.test(value)) {
                  callback(new Error("开户者名字中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        reserve_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^1[3456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入银行预留手机号"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的手机号格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
      },
      cacheForm: {}, // 修改时表单缓存
      addressLoding: false,
      addressDioding: false,
    };
  },
  created() {
    const p1 = new Promise((req, rej) => {
      getUserList({ count: 20, page: 1 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
        }
        this.userList = res.data.list;
        req();
      });
    });
    const p2 = new Promise((req, rej) => {
      getRegionList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
        }
        this.provinceList = res.data;
        req();
      });
    });
    const p3 = new Promise((req, rej) => {
      getCategoryList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
        }
        this.categoryList = res.data;
        req();
      });
    });
    var arr = [];

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      const p4 = new Promise((req, rej) => {
        getMerchantDetail({ id: this.id }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
          }
          this.cacheForm = res.data;
          req();
        });
      });
      arr = [p1, p2, p3, p4];
    } else {
      arr = [p1, p2, p3];
    }
    Promise.all(arr)
      .then(() => {
        this.loading = false;
        if (this.id) {
          this.EchoWay();
        }
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    openMap() {
      this.map = true;
      if (this.lng && this.lat) {
        this.mapInfo = {
          lng: this.lng,
          lat: this.lat,
        };
        this.Nowlnglat = [this.lng, this.lat];
      }
    },
    getCoordinate(map) {
      this.mapInfo = map;
    },
    submitMap() {
      this.map = false;
      this.addressTip = this.mapInfo.address;
    },

    EchoWay() {
      this.logoFile = {
        url: this.cacheForm.basic.logo_image,
      };
      this.basicForm.logo_image = this.cacheForm.basic.logo_image;
      this.basicForm.type = this.cacheForm.basic.type;
      this.basicForm.loc_pur_mer_cate_id = [];
      let arr = this.cacheForm.basic.loc_pur_mer_cate_id.split(",");
      arr.forEach((item) => {
        this.basicForm.loc_pur_mer_cate_id.push(Number(item));
      });
      this.basicForm.user_id = this.cacheForm.basic.user_id.id;
      this.userList = [this.cacheForm.basic.user_id];
      this.basicForm.name = this.cacheForm.basic.name;
      this.province_idWay(this.cacheForm.basic.province_id);
      this.basicForm.province_id = this.cacheForm.basic.province_id;
      this.city_idWay(this.cacheForm.basic.city_id);
      this.basicForm.city_id = this.cacheForm.basic.city_id;
      this.basicForm.county_id = this.cacheForm.basic.county_id;
      this.basicForm.address = this.cacheForm.basic.address;
      this.basicForm.responsible_person =
        this.cacheForm.basic.responsible_person;
      this.basicForm.responsible_person_cellphone =
        this.cacheForm.basic.responsible_person_cellphone;
      this.basicForm.customer_service_cellphone =
        this.cacheForm.basic.customer_service_cellphone;
      this.basicForm.status = this.cacheForm.basic.status;
      this.timeFrame = JSON.parse(this.cacheForm.basic.business_time);
      this.basicForm.remark = this.cacheForm.basic.remark;
      // 法人信息
      this.subjectForm.name = this.cacheForm.subject.name;
      this.subjectForm.certificate_no = this.cacheForm.subject.certificate_no;
      this.subjectForm.cellphone = this.cacheForm.subject.cellphone;
      this.subjectForm.duplicate_of_business_license =
        this.cacheForm.subject.duplicate_of_business_license;
      this.duplicate_of_business_licenseFile = {
        url: this.cacheForm.subject.duplicate_of_business_license,
      };
      this.subjectForm.id_card_front = this.cacheForm.subject.id_card_front;
      this.id_card_frontfile = { url: this.cacheForm.subject.id_card_front };
      this.subjectForm.id_card_reverse = this.cacheForm.subject.id_card_reverse;
      this.id_card_reversefile = {
        url: this.cacheForm.subject.id_card_reverse,
      };
      // 收款信息
      this.collectionForm.type = this.cacheForm.collection.type;
      this.collectionForm.bank_name = this.cacheForm.collection.bank_name;
      this.collectionForm.bank_card_number =
        this.cacheForm.collection.bank_card_number;
      this.collectionForm.bank_branch = this.cacheForm.collection.bank_branch;
      this.collectionForm.bank_user_name =
        this.cacheForm.collection.bank_user_name;
      this.collectionForm.reserve_cellphone =
        this.cacheForm.collection.reserve_cellphone;
    },
    // 返回本地团列表
    gobackWay() {
      this.$router.push("/groupbuying/groupbuyingmerchant");
    },
    // 重置所有表单
    resettingFrom() {
      this.$confirm("是否重置所有表单, 是否继续?", "提示", {
        confirmButtonText: "重置",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.id) {
        } else {
          this.form = {};
        }
        this.$messages.info("表单已重置");
      });
    },
    // 上传logo调用
    logoCallback(file) {
      this.logoFile = file;
      this.basicForm.logo_image = file.url;
    },
    // 根据搜索条件获取用户列表
    remoteMethodUser(query) {
      this.userLoading = true;
      getUserList({
        count: 20,
        page: 1,
        search_name: query,
        search_type: 1,
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.userLoading = false;
          return this.$messages.error(res.msg);
        }
        this.userLoading = false;
        this.userList = res.data.list;
      });
    },
    // 选择省份后执行
    province_idWay(val) {
      this.basicForm.city_id = "";
      this.basicForm.county_id = "";
      this.cityList = [];
      this.countyList = [];
      this.provinceList.forEach((res) => {
        if (val == res.id) {
          this.cityList = res.children;
          this.countyList = this.cityList[0].children;
        }
      });
    },
    // 选择城市之后执行
    city_idWay(val) {
      this.basicForm.county_id = "";
      this.countyList = [];
      this.cityList.forEach((res) => {
        if (val == res.id) {
          this.countyList = res.children;
        }
      });
    },
    addTradeTime() {
      if (this.timeFrame.length >= 5) {
        return this.$messages.warning("营业时间段太多了吧");
      }
      this.timeFrame.push({
        id: this.timeFrame.length,
        time: [],
      });
    },
    delTradeTime(row) {
      var arr = [];
      this.timeFrame.forEach((item) => {
        if (item.id !== row.id) {
          arr.push(item);
        }
      });
      this.timeFrame = arr;
    },
    // 单位营业执照图片回调
    duplicate_of_business_licenseCallback(file) {
      this.duplicate_of_business_licenseFile = file;
      this.subjectForm.duplicate_of_business_license = file.url;
    },
    // 法人身份证(国徽面)图片回调
    id_card_frontCallback(file) {
      this.id_card_frontfile = file;
      this.subjectForm.id_card_front = file.url;
    },
    // 法人身份证(人像面)图片回调
    id_card_reverseCallback(file) {
      this.id_card_reversefile = file;
      this.subjectForm.id_card_reverse = file.url;
    },
    setActiveItem(row) {
      if (row == "下一步") {
        this.$refs.basicForm.validate((valid) => {
          if (valid) {
            this.stepsActive = 1;
          } else {
            return false;
          }
        });
      } else {
        this.stepsActive = 0;
      }
    },
    submitSave() {
      const p2 = new Promise((req, rej) => {
        this.$refs.subjectForm.validate((valid) => {
          if (valid) {
            req();
          } else {
            rej("法人信息");
          }
        });
      });
      const p3 = new Promise((req, rej) => {
        this.$refs.collectionForm.validate((valid) => {
          if (valid) {
            req();
          } else {
            rej("收款信息");
          }
        });
      });
      Promise.all([p2, p3])
        .then(() => {
          var obj = {
            basic: {
              ...this.basicForm,
            },
            subject: {
              ...this.subjectForm,
            },
            collection: {
              ...this.collectionForm,
            },
          };
          obj.basic.loc_pur_mer_cate_id =
            obj.basic.loc_pur_mer_cate_id.toString();
          obj.basic.business_time = JSON.stringify(this.timeFrame);
          this.loading = true;
          if (!this.id) {
            addMerchant({ data: obj }).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.loading = false;
              this.gobackWay();
            });
          } else {
            editMerchant({ data: obj }).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);

              this.loading = false;
              console.log(123123);
              this.gobackWay();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addressWay() {
      this.addressDioding = true;

      setTimeout(() => {
        this.$refs.map.mapWay();
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.dev-product {
  width: 300px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  ::v-deep span {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    .text {
      width: 92%;
      color: #c0c4cc;
    }
    .active {
      width: 92%;
      color: #303133;
    }
    i {
      color: #d8d8d8;
    }
  }
}
</style>
<style>
.groupbuying .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.groupbuying .el-carousel__arrow--right {
  display: none !important;
}
.groupbuying .el-carousel__arrow--left {
  display: none !important;
}
</style>